import { Collapse,Empty,Radio } from 'antd'
import React, { useEffect, useState } from 'react'
import { useLocation, useParams, useSearchParams } from 'react-router-dom';
import FourGrid from '../../components/FourGrid';
import { supabase } from '../../utils'
import './index.scss'
const { Panel } = Collapse;

export default function MoreContent() {
  // 如果url有值就设置
  const [search,_]=useSearchParams()
  const select=search.get('select')

  const [data,setdata]=useState([]) //渲染数据
  // const [selected,setselected]=useState('')   //所有已选项

  const [style,setstyle]=useState('') //类型
  const [edition,setedition]=useState('')  //版本类型
  // 类型
  async function funcselect(e){
    setstyle(e.target.value+',')
    // setselected(edition+e.target.value)
    const arr=(edition+e.target.value).split(',')
    let { data, error } = await supabase
      .from('AllData')
      .select('*')
    arr.forEach(item=>{
      const reg=new RegExp(item)  //如果正则为''，不影响。因为''的正则会匹配所有的，只是会多一次无用的循环罢了
      data=data.filter(i=>reg.test(i.label))
    })
    setdata(data)
  }
  //版本类型
  async function funcedition(e){
    setedition(e.target.value+',')
    // setselected(style+e.target.value)
    const arr=(style+e.target.value).split(',')
    let { data, error } = await supabase
      .from('AllData')
      .select('*')
    arr.forEach(item=>{
      const reg=new RegExp(item)  //如果正则为''，不影响。因为''的正则会匹配所有的，只是会多一次无用的循环罢了
      data=data.filter(i=>reg.test(i.label))
    })
    setdata(data)
  }

  async function Initialdata(){
    const { data:text, error } = await supabase
      .from('AllData')
      .select('*')
    // 如果传了数据就筛选指定数据，否则直接拿全部数据
    console.log(text)
    if(select){
      const reg=new RegExp(select)
      const arr=text.filter(i=>reg.test(i.label))
      setdata(arr)
      // setselected(select+',')
      setstyle(select+',')
    }else{
      setdata(text)
    }
  }

  useEffect(()=>{
    Initialdata()
    
  },[])
  return (
    <div className='morecontent'>
        
        
        <Collapse defaultActiveKey={['1']} ghost>
            <Panel header="选择" key="1">
                <div className="checkbox">
                    <span className='select'>类型</span>
                    <Radio.Group defaultValue={select?select:''} size="large" onChange={funcselect}>
                        <Radio.Button value="">全部</Radio.Button>
                        <Radio.Button value="小编">小编推荐</Radio.Button>
                        <Radio.Button value="爱情">爱情</Radio.Button>
                        <Radio.Button value="百合">百合</Radio.Button>
                        <Radio.Button value="搞笑">搞笑</Radio.Button>
                        <Radio.Button value="热血">热血</Radio.Button>
                        <Radio.Button value="最高评分">最高评分</Radio.Button>
                        <Radio.Button value="萝莉">萝莉</Radio.Button>
                        <Radio.Button value="后宫">后宫</Radio.Button>
                        <Radio.Button value="致郁">致郁</Radio.Button>
                        <Radio.Button value="大尺度">大尺度</Radio.Button>
                    </Radio.Group>
                </div>
                <div className="checkbox">
                    <span className='select'>版本类型</span>
                    <Radio.Group defaultValue={edition?edition:''} size="large" onChange={funcedition}>
                        <Radio.Button value="">全部</Radio.Button>
                        <Radio.Button value="正片">正片</Radio.Button>
                        <Radio.Button value="电影">电影</Radio.Button>
                    </Radio.Group>
                </div>
            </Panel>
        </Collapse>

    <FourGrid data={data}/>

    {/* 空状态 */}
    {data.length?'':<Empty description={<h1>暂无数据</h1>}/>}
    
    </div>
  )
}
